<!--合约交易-->
<template>
  <div class="bg bg1" 
  @viewappear="viewappear" @viewappear1="viewappear" 
  @viewdisappear="viewdisappear" @viewdisappear1="viewdisappear">
  
   <!--菜单-->
    <SubMenu :menu="menu" :menus="menus" @menuClick="menuClick" />

    <template v-if="loading">
      <TradingContractKai ref="kai" v-if="menu == 0" />
      <TradingContractPin ref="pin"  v-else-if="menu == 1" />
      <TradingContractChi ref="chi" v-else-if="menu == 2" @showView="menuClick" />
    </template>
  </div>
</template>

<script>

import SubMenu from '@/public/view/SubMenu.vue' 
import TradingContractKai from '@/trading/TradingContractKai.vue'
import TradingContractPin from '@/trading/TradingContractPin.vue'
import TradingContractChi from '@/trading/TradingContractChi.vue'

const weexFunction = weex.requireModule("WeexFunction");;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('合约交易'));

export default {
  components: {
    SubMenu,
    TradingContractKai,
    TradingContractPin,
    TradingContractChi
  },
  
  data() {
    return {
      T:T,
      loading:true, //true正式加载，避免合约、现货订阅冲突

      menu: 0,
      menus:[T('开仓'), T('平仓'), T('持仓')]
    };
  },

  mounted() {
  },

  methods: {

    /*************************************************通信触发*/
    //完全显示
    viewappear(param) {
      weexFunction.debugLog('显示：'+param.url)
      if (param['url'] != 'trading/TradingContract')return;
        if (this.loading) {
          this.$refs.kai && this.$refs.kai.viewappear();
          this.$refs.pin && this.$refs.pin.viewappear();
          this.$refs.chi && this.$refs.chi.viewappear();
        }
        this.loading = true;
    },

    //完全隐藏
    viewdisappear(param) {
      weexFunction.debugLog('隐藏'+param.url)
      if (param['url'] != 'trading/TradingContract')return;
      this.$refs.kai && this.$refs.kai.viewdisappear();
      this.$refs.pin && this.$refs.pin.viewdisappear();
      this.$refs.chi && this.$refs.chi.viewdisappear();
    },

    /************************************************* 按钮*/
    menuClick(index){
      this.$refs.kai && this.$refs.kai.viewdisappear();
      this.$refs.pin && this.$refs.pin.viewdisappear();
      this.$refs.chi && this.$refs.chi.viewdisappear();
      this.menu = index;
    },
  }
};

</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

</style>